<template>
  <view class="content">
    <tabbar current="2"></tabbar>
    <view class="padding-sm u-flex-between bgImgBox" style="z-index: 999;">
      <view class="u-flex">
        <view style="margin-right: 24rpx;">
          <image mode="aspectFill" style="width: 140rpx; height: 140rpx; border-radius: 50%;" :src="form.avatar" >
          </image>
        </view>
        <view>
          <view>
            <span v-if="isUserName">{{form.nickname}}</span>
            <view style="width: 400rpx;height: 100rpx;line-height: 100rpx;z-index: 9999;" v-else @tap="goLogin">点此登录
            </view>
            <span>
              <template v-if="form.sex ==='0'">
                <image style="width: 24rpx; height: 24rpx;" :src="form.avatar" mode="">
                </image>
              </template>
            </span>
          </view>
          <view style="padding: 10rpx ; font-size: 18rpx;">
            <span v-if="form.card_data.city" class="span-box margin-right-sm"
              style="padding: 0 12rpx;">{{form.card_data.city}}</span>
            <span v-if="form.identity_data.length > 0" class="span-box margin-right-sm" style="padding: 0 12rpx;"
              v-for="(item,i) in form.identity_data" :key="i">{{item}}</span>
          </view>
          <view style="color: rgba(0,0,0,0.4); font-size: 24rpx;">
            <span v-if="form.uid">UID:{{form.uid}}</span>
            <!-- <span v-else @click.stop="goLogin" style="width: 400rpx;"></span> -->
          </view>
        </view>
      </view>
      <view>
        <image @click.stop="gogerenxinxi" style="width: 48rpx; height: 48rpx;" src="../../static/img/Slice 15.png"
          mode="">
        </image>
      </view>
    </view>
    <view class="card margin-top" style="width: 686rpx;height: 160rpx; border-radius: 16rpx;   margin: 24rpx auto;">
      <u-grid :border="false" col="4">
        <u-grid-item class="u-grid-item" v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex" @click="click">
          <image style="width: 40rpx; height: 40rpx; margin-top: 32rpx;" :src="baseListItem.avatar" mode="">
          </image>
          <view class="grid-text" style="font-size: 28rpx;">{{baseListItem.title}}</view>
        </u-grid-item>
        <view class="redDrop" v-if="unread == true">
          
        </view>
      </u-grid>
    </view>
    <view class="list " v-if="state == 1 && cardform.my_card" style="height: 332rpx;">
      <view class="item " style="height: 332rpx;" @tap="goDetail(cardform.my_card.id)">
        <view class="itemContent ">
          <view class="title" @click.stop="gowdrmp">
            <view class="name" style="font-size: 28rpx;">
              我的达人名片
            </view>
            <view class="btns">
              <image style="width: 24rpx; height: 24rpx;" src="../../static/img/箭头.png" mode="">
              </image>
            </view>
          </view>
          <view class="title">
            <view class="name" style="font-size: 32rpx;font-weight: 550;margin-top: 24rpx;">
              {{cardform.my_card.dy_nickname}}
              <image src="../../static/img/man.png" mode=""></image>
            </view>
            <view class="btns">
              <view class="frame">
                <button class="btnNone" style="position: relative;" open-type="share" catchtap="share">
                  <image src="../../static/img/Frame.png" mode=""></image>
                </button>
              </view>
            </view>
          </view>
          <view class="bottomBox">
            <view class="avatar">
              <image src="../../static/img/Slice 40.png" mode=""></image>
            </view>
            <view class="userId" style="width: 300rpx;" @tap.stop="copy(form.card_data.dy_id)">
              抖音ID:{{form.card_data.dy_id}}
              <image class="copyImg" src="../../static/img/copy.png" mode=""></image>
            </view>
            <view class="">

            </view>
          </view>
          <view class="lableBoxS">
            <view style="background-color: #DDE3F9;">
              {{cardform.my_card.city}}{{cardform.my_card.area}}
            </view>
            <view style="background-color: #FFDFC1;" v-for="(item1,index) in cardform.my_card.category_data ">
              {{item1}}
            </view>
            <view style="background-color: #CAE5BD;">
              {{cardform.my_card.order_content_type.content_type_name}}
            </view>
          </view>
          <view class="numbers padding-bottom-lg">
            <view class="numberBox">
              <view class="lable" style="margin-right: 8rpx;">
                粉丝
              </view>
              <view class="num">
                {{cardform.my_card.fans_num}}
              </view>
            </view>
            <view class="numberBox" style="text-align: center;">
              <view class="lable" style="margin-right: 8rpx;">
                内容力等级
              </view>
              <view class="num golden">
                Lv{{cardform.my_card.content_level}}
              </view>
            </view>
            <view class="numberBox" style="text-align: right;">
              <view class="lable" style="margin-right: 8rpx;">
                带货力等级
              </view>
              <view class="num golden">
                Lv{{cardform.my_card.sales_level}}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-else style="
		margin-left :35rpx; ;
		width: 686rpx;
    height: 332rpx;
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    opacity: 1; display:flex; align-items: center; justify-content: center;position: relative;">
      <view class="btns" style="position: absolute;top: 20rpx;right: 20rpx;" @click="gowdrmp">
        <image style="width: 24rpx; height: 24rpx;" src="../../static/img/箭头.png" mode="">
        </image>
      </view>
      <view class="" @click="gossss">
        <view class="">
          <image style="margin-left: 70rpx; width: 48rpx; height: 48rpx;" src="../../static/img/add1.png" mode="">
          </image>
        </view>
        <view class="">
          添加个人名片
        </view>
      </view>

    </view>
    <view class="card margin-top padding-sm"
      style="width: 686rpx;height: 236rpx; border-radius: 16rpx;     margin: 24rpx auto;">
      <view class="u-flex-between" @tap="goHeZuo">
        <view>
          <span style="font-size: 28rpx;">合作商单</span>
          <span class="setitle">针对达人</span>
        </view>
        <view>
          <image style="width: 24rpx; height: 24rpx;" src="../../static/img/箭头.png" mode=""></image>
        </view>
      </view>
      <u-grid :border="false" @click="click1" col="4">
        <u-grid-item v-for="(baseListItem,baseListIndex) in baseListone" :key="baseListIndex">
          <image style="width: 48rpx; height: 48rpx;margin-top: 42rpx;" :src="baseListItem.avatar" mode="">
          </image>
          <view class="grid-text" style="font-size: 24rpx;">{{baseListItem.title}}</view>
        </u-grid-item>
      </u-grid>
    </view>
    <view class="card margin-top padding-sm"
      style="width: 686rpx;height: 236rpx; border-radius: 16rpx;     margin: 24rpx auto;">
      <view class="u-flex-between" @tap="goGuan">
        <view>
          <span style="font-size: 28rpx;">商单管理</span>
          <span class="setitle">针对商家</span>
        </view>
        <view>
          <image style="width: 24rpx; height: 24rpx;" src="../../static/img/箭头.png" mode=""></image>
        </view>
      </view>
      <u-grid :border="false" @click="click2" col="4">
        <u-grid-item v-for="(baseListItem,baseListIndex) in baseListtwo" :key="baseListIndex">
          <image style="width: 52rpx; height: 52rpx;margin-top: 42rpx;" :src="baseListItem.avatar" mode="">
          </image>
          <view class="grid-text" style="font-size: 24rpx;">{{baseListItem.title}}</view>
        </u-grid-item>
      </u-grid>
    </view>

    <view>
      <u-modal :show="show" :title="title" @confirm="confirm" @cancel="show = false" confirmColor="#7D81A9"
        confirmText="取消" :content='content'>
        <view class=" u-text-center">
          <view class="padding-sm" style="
font-size: 32rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #000000;">
            企业微信二维码
          </view>
          <view class="padding-sm" style="font-size: 28rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: rgba(0,0,0,0.5);
">
            扫一扫了解速推单的更多信息
          </view>
          <u-image style="width: 302rpx; height: 302rpx;" :src="value" mode=""></u-image>
        </view>
      </u-modal>

    </view>
  </view>
</template>

<script>
  import tabbar from '@/components/tabbar/tabbar'
  export default {
    components: {
      tabbar
    },
    data() {
      return {
        unread:false,
        isUserName: false,
        cardform: {},
        state: 0,
        show: false,
        value: '',
        form: {
          avatar: '',
          nickname: '',
          sex: '',
          assress: '',
          type: '',
          uid: '',
          fensi: '',
          neirong: '',
          daihuo: '',
          sucai: ''
        },
        baseList: [{
            avatar: '../../static/img/Slice 17.png',
            title: '我的收藏'
          },
          {
            avatar: '../../static/img/Slice 18.png',
            title: '商单日历'
          },
          {
            avatar: '../../static/img/Slice 19.png',
            title: '消息中心'
          },
          {
            avatar: '../../static/img/Slice 20.png',
            title: '我的客服'
          },
        ],
        baseListone: [{
            avatar: '../../static/img/Slice 26.png',
            title: '已报名',
            id: '2'
          },
          {
            avatar: '../../static/img/Slice 27.png',
            title: '已通过',
            id: '3'
          },
          {
            avatar: '../../static/img/Slice 28.png',
            title: '已结束',
            id: '4'
          },
          {
            avatar: '../../static/img/Slice 29.png',
            title: '被邀约',
            id: '5'
          },
        ],
        create_card: '',
        baseListtwo: [{
            avatar: '../../static/img/Slice 30.png',
            title: '创建'
          },
          {
            avatar: '../../static/img/Slice 31.png',
            id: '2',
            title: '进行'
          },
          {
            avatar: '../../static/img/Slice 32.png',
            id: '3',
            title: '共创'
          },
          {
            avatar: '../../static/img/Slice 33.png',
            id: '4',
            title: '结束'
          },
        ],

      };
    },
    async onShow() {
      this.isUserName = false
      this.state = 0
      const ress = await uni.$http.post('create_anchor_card/get_card_state')
      this.state = ress.data.data.state
      const ressdata = await uni.$http.post('user/get_my_card')
      this.cardform = ressdata.data.data
      if (uni.getStorageSync('userinfo')) {
        let data = uni.getStorageSync('userinfo')
        this.form.nickname = data.nickname
        this.isUserName = true
      } else {
        this.isUserName = false
      }
      const res = await uni.$http.post('user/get_user_info')
      this.form = res.data.data
      this.create_card = this.form.create_card
      this.get_user_message_state()
    },
    created() {
      uni.hideTabBar()
    },
    async onLoad() {

    },
    methods: {
      async get_user_message_state() {
        const {data:res} = await uni.$http.post('user/get_user_message_state')
        if(res.data.state == 1) {
          this.unread = true
        }else {
          this.unread = false
        }
      },
      
      goLogin() {
        console.log(123);
        uni.navigateTo({
          url: '/pages/my/login'
        })
      },
      qq() {
        console.log('123');
      },
      // 跳转详情
      goDetail(id) {
        uni.navigateTo({
          url: '/pages/people/drxxxq?id=' + id
        })
      },
      confirm() {
        setTimeout(() => {
          // 3秒后自动关闭
          this.show = false;
        }, 3000)
      },
      gogerenxinxi() {
        uni.navigateTo({
          url: '/pages/my/index'
        })
      },
      async click(e) {
        if (e == 0) {
          uni.navigateTo({
            url: '/pages/my/my-shoucang'
          })
        } else if (e == 1) {
          uni.navigateTo({
            url: '/pages/my/shangdanrili'
          })
        } else if (e == 2) {
          uni.navigateTo({
            url: '/pages/my/xxzx'
          })
        } else if (e == 3) {
          this.show = true
          const res = await uni.$http.post('others/get_kf_qrcode')
          console.log('5555', res.data.data);
          this.value = res.data.data
        }
      },
      goHeZuo() {
        uni.navigateTo({
          url: '/pages/my/hezuoshangdan?id=0'
        })
      },
      goGuan() {
        uni.navigateTo({
          url: '/pages/my/shangdanguanli?type=1'
        })
      },
      click1(e) {
        if (e == 0) {
          uni.navigateTo({
            url: '/pages/my/hezuoshangdan?id=1'
          })
        } else if (e == 1) {
          uni.navigateTo({
            url: '/pages/my/hezuoshangdan?id=2'
          })
        } else if (e == 2) {
          uni.navigateTo({
            url: '/pages/my/hezuoshangdan?id=3',
          })
        } else if (e == 3) {
          uni.navigateTo({
            url: '/pages/my/hezuoshangdan?id=4',
          })
        }
      },
      click2(e) {
        let type = this.baseListtwo[e].id
        if (e == 0) {
          uni.navigateTo({
            url: '/pages/addOrder/addOrder'
          })
        } else if (e == 1) {
          uni.navigateTo({
            url: '/pages/my/shangdanguanli?type=' + type
          })
        } else if (e == 2) {
          uni.navigateTo({
            url: '/pages/my/shangdanguanli?type=' + type
          })
        } else if (e == 3) {
          uni.navigateTo({
            url: '/pages/my/shangdanguanli?type=' + type
          })
        }
      },
      gossss() {
        if (this.create_card != 1) {
          uni.showToast({
            title: '当前身份无法创建名片',
            icon: 'none'
          });
          return
        }
        uni.navigateTo({
          url: '/pages/people/chuangjiandaren'
        })
      },
      gowdrmp() {
        uni.navigateTo({
          url: '/pages/my/my-drmp'
        })
      }
    }
  }
</script>

<style lang="scss">
  .content {
    background-color: #F2F3F6;
    padding-bottom: 200rpx;

  
    .tabbar {
      position: fixed;
      left: 0;
      bottom: 0;
      z-index: 99;
    }



    .list {
      .item {
        width: 686rpx;
        height: 300rpx;
        padding-bottom: 26rpx;
        background: #FFFFFF;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        margin: 24rpx auto;

        .stateImg {
          width: 92rpx;
          height: 36rpx;
        }

        .itemContent {
          padding: 18rpx 22rpx 0 24rpx;

          .title {
            display: flex;
            align-items: center;

            .name {
              flex: 1;
              width: 380rpx;
              font-size: 32rpx;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 500;
              color: #000000;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;

              image {
                display: inline-block;
                width: 24rpx;
                height: 24rpx;
                margin-left: 8rpx;
              }
            }

            .btns {

              display: flex;
              font-size: 24rpx;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 500;
              color: #FFFFFF;

              .btn {
                width: 128rpx;
                height: 52rpx;
                line-height: 52rpx;
                text-align: center;
                background: #7D81A9;
                border-radius: 40rpx;
                margin-right: 16rpx;
              }

              .frame {
                width: 52rpx;
                height: 52rpx;

                image {
                  width: 52rpx;
                  height: 52rpx;
                }
              }
            }
          }

          .lableBoxS {
            display: flex;
            color: rgba(0, 0, 0, 0.6);
            font-size: 20rpx;
            margin-top: 16rpx;
            margin-bottom: 24rpx;

            view {
              height: 32rpx;
              line-height: 32rpx;
              padding: 0 12rpx;
              margin-right: 8rpx;
            }
          }

          .numbers {
            display: flex;
            align-items: center;
            // flex-wrap: wrap;
            justify-content: space-between;
            .numberBox {
              // width: 33%;
              display: flex;
              align-items: center;
              text-align: center;

              .lable {
                font-size: 24rpx;
                color: #6E7480;
              }

              .num {
                font-size: 32rpx;
                color: #000000;
              }

              .golden {
                font-size: 32rpx;
                color: #EAA04A;
              }
            }

            .lable {
              font-size: 24rpx;
              color: #6E7480;
            }

            .num {
              font-size: 32rpx;
              color: #000000;
            }

            .golden {
              font-size: 32rpx;
              color: #EAA04A;
            }
          }

          .bottomBox {
            display: flex;
            align-items: center;
            height: 52rpx;
            margin-top: 14rpx;

            .avatar {
              width: 44rpx;
              height: 44rpx;
              border-radius: 22rpx;

              image {
                width: 100%;
                height: 100%;
              }
            }

            .userId {
              font-size: 24rpx;
              font-family: PingFang SC-Regular, PingFang SC;
              color: #6E7480;
              margin: 0 8rpx;

              .copyImg {
                width: 28rpx;
                height: 28rpx;
                margin-left: 8rpx;
              }
            }

            .btnS {
              display: flex;

              .btn {
                width: 128rpx;
                height: 52rpx;
                line-height: 52rpx;
                text-align: center;
                background: #7D81A9;
                border-radius: 40rpx;
                font-size: 24rpx;
                font-family: PingFang SC-Medium, PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
                margin-right: 16rpx;
              }
            }
          }
        }
      }
    }
  }

  .card {
    background-color: #fff;
  }

  .span-box {
    display: inline-block;
    font-size: 20rpx;
    height: 30rpx;
    line-height: 30rpx;
    padding: 0 12rpx;
    color: rgba(0,0,0,0.6);
    background: rgba(125, 129, 169, 0.2);
    border-radius: 2rpx 2rpx 2rpx 2rpx;
  }

  .grid-text {
    margin-top: 16rpx;
    margin-bottom: 32rpx;
  }

  .setitle {
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    font-size: 20rpx;
    margin-left: 8rpx;

  }

  .bgImg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 696rpx;
    z-index: 1;
  }

  .bgImgBox {
    padding-top: 194rpx;
    z-index: 99;
     background: linear-gradient(180deg, #DBE4F3 10%, #F2F3F6 100%);
 // background: url('https://skdjmwj99.bxsmmcy.com/imgs/bg.png') repeat;
 // background-size: 750rpx 696rpx;
  }
  // /deep/.u-grid-item:nth-child(3) {
  //   position: relative;
  // }
  .redDrop {
    position: absolute;
    right: 230rpx;
    top: 26rpx;
    width: 16rpx;
    height: 16rpx;
    background: #E64F5E;
    border-radius: 8rpx;
  }
</style>